<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统中心</el-breadcrumb-item>
      <el-breadcrumb-item>角色管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-form :model="role" label-width="70px">
        <el-col :span="5">
          <el-form-item label="角色名">
            <el-input v-model="roleForm.roleName"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <el-button type="info" plain @click="search()">搜索</el-button>
    </el-row>
    <el-button type="primary" @click="centerDialogVisible = true">添加用户</el-button>
    <el-table
      :data="rolelist"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="roleName"
        label="角色名">
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="角色备注"
        width="100">
      </el-table-column>
      <el-table-column
        prop="hiredate"
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" @click="getuser(scope.row.id)">编辑</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="rolemenu(scope.row)">分配角色</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pagenum"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    <el-dialog
      :title="role.id==null?'添加用户':'编辑用户'"
      :visible.sync="centerDialogVisible"
      center :close-on-click-modal="false" @closed="crearUser">
      <el-form ref="form" :model="role" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="角色名">
              <el-input v-model="role.roleName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="角色备注">
              <el-input v-model="role.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveUser()">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="分配权限"
      :visible.sync="roleDialogVisible"
      center :close-on-click-modal="false" @closed="crearUser">
      <el-form ref="form" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="角色名">
              <el-input v-model="roleName" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-tree
              ref="menutree"
              :data="data"
              show-checkbox
              node-key="id"
              default-expand-all
              :default-checked-keys="menuIds"
              :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span><i :class="data.icon"></i>&nbsp;{{data.menuName}}</span>

        </span>
            </el-tree>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="roleDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addrolemenu()">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name: "RoleList",
      data(){
        return{
          data:[{
            id:0,
            menuName: '用户管理系统',
            icon:'el-icon-platform-eleme',
            children: []
          }],
          role:{},
          roleForm:{},
          rolelist:[],
          page:{
            pagenum:0,
            pagesize:5
          },
          total:0,
          roleName:"",
          roleId:'',
          menuIds:'',
          roleDialogVisible:false,
          centerDialogVisible: false
        }
      },
      methods:{
        addrolemenu:function(){
          this.menuIds=this.$refs.menutree.getHalfCheckedKeys().concat(this.$refs.menutree.getCheckedKeys())
          var formdata=new FormData();
          formdata.append("roleId",this.roleId);
          formdata.append("menuIds",this.menuIds);
          this.$http.post("/finance-service-system/rolemenu/save",formdata).then(
            (res)=>{
              if(res.data.success){
                this.$message({
                  message: '数据保存成功',
                  type: 'success'
                });
                this.search();
              }else{
                this.$message.error(res.data.message);
              }
              this. roleDialogVisible=false;
            }
          );
        },
        rolemenu: async function (row) {
          this.roleDialogVisible = true;
          this.roleName = row.roleName;
          this.roleId = row.id;
          let res = await this.$http.get("/finance-service-system/menu/getTree");
          this.data[0].children = res.data.result;
          this.$http.get("/finance-service-system/rolemenu/getone/" + this.roleId).then(
            (res) => {
              if (res.data.success) {
               this.menuIds=res.data.result;
              } else {
                this.$message.error(res.data.message);
              }
            }
          );
        },
        search:function () {
          this.$http.post("/finance-service-system/role/list/"+this.page.pagenum+"/"+this.page.pagesize,this.roleForm).then(
            (res)=>{
              this.rolelist=res.data.result.list;
              this.total=res.data.result.total;
            }
          )
        },
        handleSizeChange:function (val) {
          this.page.pagesize=val;
          this.search();
        },
        handleCurrentChange:function (val) {
          this.page.pagenum=val;
          this.search();
        },
        saveUser:function(){
          this.$http.post("/finance-service-system/role/saverole",this.role).then(
            (res)=>{
              if(res.data.success){
                this.$message({
                  message: '数据保存成功',
                  type: 'success'
                });
              }else{
                this.$message.error('用户名已存在或添加失败');
              }
            }
          );
          this.centerDialogVisible=false;
          this.search();
        },
        crearUser:function () {
          this.role={};
        },
        getuser:function (id) {
          this.$http.get("/finance-service-system/role/getrole/"+id).then(
            (res)=>{
              if(res.data.success){
                this.role=res.data.result;
                this.centerDialogVisible=true;
              }else{
                this.$message.error(res.data.message);
              }
            }
          );
        }
      },
      mounted() {
        this.search();
      }
    }
</script>

<style scoped>

</style>
